<template>
	<view class="page">
		<u-navbar :title='title' :autoBack="true" bgColor="transparent"></u-navbar>
		<image
			src="https://renovationcdn.jiachuangnet.com/person/bg3.png"
			class='bg' style=""></image>
		<view class="container">
				<view class="info_box" >
					<view class="float_right">
						<view class="flex" style="flex-direction: column;align-items: flex-end;">
							<view class="flex" style="margin-bottom: 40rpx;">
								<image src="https://renovationcdn.jiachuangnet.com/person/xunzhang.png" mode="" style="width: 24rpx;height: 34rpx;margin-right: 13rpx;"></image>
								近180天共计接单{{insertTalentForm.orderNum}}单
							</view>
							<view class="flex" style="align-items: center;" @click="gotoCollect">
								<u-icon name="heart-fill" :color="isCollection?'#fa5151':'#bfbfbf'" size="28"></u-icon>
								收藏
							</view>
						</view>
					</view>
					<view class="avatar_box">
						<view style="margin-bottom: 30rpx; width: 153rpx;height:153rpx;border-radius: 50%;border: 5rpx solid #fff;overflow: hidden" @click="viewImage(insertTalentForm.avatar)">
							<image :src="'https://'+insertTalentForm.avatar" mode="" style="width: 100%;height:100%;"></image>
						</view>
					</view>
					<view class="flex" style="justify-content: start;align-items: center; padding: 9rpx 10rpx;">
						<view class="name">
							{{insertTalentForm.nickName}}
						</view>
						<view class="roleId">
							{{insertTalentForm.roleName}}
						</view>
						<view class="score">
							{{insertTalentForm.score}}分
						</view>
					</view>
					<view class="flex" style="align-items: center;justify-content: start;padding: 9rpx 10rpx;">
						<view class="msg_item">
							{{insertTalentForm.sex}}
						</view>
						<view class="border-right"></view>
						<view class="msg_item">
							{{insertTalentForm.age}}岁
						</view>
						<view class="border-right"></view>
						<view class="msg_item">
							工作{{insertTalentForm.workYears}}年
						</view>
						<!-- <view class="border-right"></view> -->
					</view>
					<view class="msg_item" style="padding: 9rpx 10rpx 0 10rpx;">
						{{insertTalentForm.address}}
					</view>
					<view class="flex bg2" style="align-items: center;">
						<view class="poto flex" style="align-items: center;" @click="call(insertTalentForm.phoneNumber)">
							<u-icon name="phone-fill" color="#f79e1b" size="24"></u-icon>
							<view class="text">
								电话：{{insertTalentForm.phoneNumber}}
							</view>
						</view>
						<view class="chat flex" style="align-items: center;" @click='setClip(insertTalentForm.wechatId)'>
							<image src="https://renovationcdn.jiachuangnet.com/person/weichat.png" mode="" style="width: 36rpx;height: 28rpx;"></image>
							<view class="text">
								微信：{{insertTalentForm.wechatId}}
							</view>
						</view>
					</view>
						
						
						
						

						

							
						
				</view>
				<view class="experience_box">
					<view class="flex" style="align-items: center;margin-top: 30rpx;">
						<view class="info_title flex" style="margin: unset; ">
							<view class="boder-left" style="margin-right: 16rpx;"></view>
							项目经验
						</view>
					</view>
					<view class="experience_wrapper">
						<view class="experience_item" v-for=" (item,index) in insertTalentForm.projectDetail" :key="index">
							<view class="experience_item_title flex">
								<view class="experience_item_projectName">
									{{item.projectName}}
								</view>
								<view class="experience_item_time">
									{{`${item.startTime}至${item.endTime}`}}
								</view>
							</view>
							<view class="experience_item_content">
								<text>
									{{item.content}}
								</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="certificates_unload" >
					<view class="info_title flex">
						<view class="boder-left"></view>
						技能证书
					</view>
					<view style="padding: 40rpx 0;">
						<view class="flex"  style="flex-wrap: wrap;">
							<image :key="index"  @click="preImgList(index)" v-for="(url,index) in insertTalentForm.certificateImg" :src="'http://'+url" mode="" style="width: 310rpx;height: 228rpx;"></image>
						</view>
					</view>
				</view>
				<view class="certificates_unload" >
					<view class="info_title flex" >
						<view class="boder-left"></view>
						个人简介
					</view>
					<view style="padding: 40rpx 0;font-weight: 500;font-size: 26rpx;line-height: 40rpx;color: #8A8A8A;">
						{{insertTalentForm.introduction}}
					</view>
				</view>
				<!-- 经理给工人指派任务 -->
				<view class="submit_btn" v-if="loginType==3||loginType==0">
					<u-button type="primary" text="指派任务" @click="getAssignTaskList"></u-button>
				</view>
				<u-picker @cancel="pickerAssign=false" :show="pickerAssign" :columns="columns" @confirm="addAssignTaskWork"></u-picker>
			</view>
		</view>
		
</template>

<script>
	export default {
		data() {
			return {
				columns:[],
				pickerAssign:false,
				assignTaskList:[],
				loginType:'',
				isEdit:false,
				title:'',
				tips: '',
				seconds: 60,
				insertTalentForm:{
					userName:'',
					roleId:0,
					password:'',
					wechatId:'',
					nickName:'',
					sex:"",
					age:'',
					orderNum:0,
					workYears:'',
					introduction:'',
					phoneNumber:'',
					code:'',
					score:'',
					address:'',
					latitude:'',
					longitude:'',
					avatar:'',
					idCard:'',
					idCardImg:[],
					frontImg:'',
					backImg:'',
					roleName:'',
					certificateImg:[],
					projectDetail:[],
				},
				startTime:'',
				endTime:'',
				projectDetailForm:{
					projectName:'',
					startTime:'',
					endTime:'',
					content:''
				},
				sexList:[
					{
						name:'男'
					},
					{
						name:'女'
					},
				],
				roleList:[],
				showAddExperience: false,
				showSex: false,
				showStartTimer:false,
				showEndTimer:false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				userId:0,
				isCollection:false
			};
		},
		onLoad(query){
			console.log(query.userId)
			this.userId=query.userId
			this.getTalentInfo()
			this.loginType= uni.getStorageSync('loginType')
		},
		methods: {
			isCollectionTalent(){
				uni.$u.http.get('/talent/isCollectionTalent',{
					params:{
						userId: uni.getStorageSync('userId'),
						talentId: this.insertTalentForm.userId
					}
				}).then(res=>{
					if(res==1){
						this.isCollection=true
					}
				})
			},
			gotoCollect(){
				if(this.isCollection){
					// 取消收藏
					uni.$u.http.get('/talent/deleteCollectionTalent',{
						params:{
							talentId: this.insertTalentForm.userId,
							userId: uni.getStorageSync('userId')
						}
					}).then(res=>{
						uni.$u.toast('取消收藏');
						this.isCollection=false
					})
				}else{
					// 收藏
					uni.$u.http.post('/talent/collectionTalent',{
						talentId: this.insertTalentForm.userId,
						userId: uni.getStorageSync('userId')
					}).then(res=>{
						uni.$u.toast('收藏成功');
						this.isCollection=true
					})
				}
				
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log(res)
					}
				})
			},
			setClip(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('success');
					}
				});
			},
			viewImage(url){
				uni.previewImage({
					current: 0,
					urls: ['http://'+url],
					longPressActions: {
						itemList: ['保存图片'],
						success: data=> {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if(data.tapIndex==0){
								uni.getImageInfo({
											src:'http://'+url,
											success: function(res) {
												console.log(res)
												uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
													filePath:res.path, //图片文件路径
													success: function() {
														uni.showToast({
															title: '图片保存成功',
															icon: 'none',
														});
													},
													fail: function(e) {
														console.log(e);
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												});
											},
											fail: function(e) {
												console.log(e);
												uni.closePreviewImage()
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										})
							}
						},
													fail: function(err) {
														console.log(err.errMsg);
													}
												}
				});
			},
			preImgList(currentIndex){
						uni.previewImage({
							current:currentIndex,
							urls:this.insertTalentForm.certificateImg.map(url=>'http://'+url),
							longPressActions: {
								itemList: ['保存图片'],
								success: data=> {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
									uni.closePreviewImage()
									/* 保存图片到系统相册 */
									if(data.tapIndex==0){
										uni.getImageInfo({
													src:this.insertTalentForm.certificateImg.map(url=>'http://'+url)[data.index],
													success: function(res) {
														console.log(res)
														uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
															filePath:res.path, //图片文件路径
															success: function() {
																uni.showToast({
																	title: '图片保存成功',
																	icon: 'none',
																});
															},
															fail: function(e) {
																console.log(e);
																uni.showToast({
																	title: '图片保存失败',
																	icon: 'none',
																});
															},
														});
													},
													fail: function(e) {
														console.log(e);
														uni.closePreviewImage()
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												})
									}
															},
															fail: function(err) {
																console.log(err.errMsg);
															}
														}
						})
			},
			addAssignTaskWork(e){
				return uni.$u.http.post('/assign/addAssignTaskWork',{
					assignTaskId: this.assignTaskList[e.indexs[0]].assignTaskId,
					userId: this.insertTalentForm.userId
				}).then(res=>{
					if(res){
						uni.$u.toast('指派成功!')
						this.pickerAssign=false
					}
				})
			},
			getAssignTaskList(){
				return uni.$u.http.get('/assign/getTaskInformationDto').then(res=>{
					if(res){
						this.assignTaskList=res
						let arr=res.map(v=>{
							return v.assignName
						})
						this.columns=[arr]
						this.pickerAssign=true
					}
				})
			},
			getTalentInfo(){
				return uni.$u.http.get('/talent/getTalentInfo',{params:{
					userId:this.userId
				}}).then(res=>{
					if(res){
						this.insertTalentForm=res
						this.isCollectionTalent()
					}
				})
			},
			
		}
	};
</script>
<style>
	page {
		background: #f8f8f8;
		font-size: 12px;
	}
</style>
<style lang="scss" scoped>
	.float_right{
		position: absolute;
		right: 21rpx;
		top: 38rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #1E272E;
	}
	.info_box{
		padding: 100rpx 30rpx 45rpx 30rpx !important;
		position: relative;
		.border-right{
			width: 1rpx;
			height: 22rpx;
			background: #8A8A8A;
			margin: 0 24rpx;
		}
		.msg_item{
			font-weight: 500;
			font-size: 26rpx;
			color: #8A8A8A;
		}
		.name{
			font-weight: bold;
			font-size: 32rpx;
			color: #1E272E;
		}
		.roleId{
			font-weight: 500;
			font-size: 26rpx;
			color: #1E272E;
			margin-left: 20rpx;
		}
		.score{
			font-weight: bold;
			font-size: 28rpx;
			color: #ED115E;
			margin-left: 20rpx;
		}
		
		.bg2{
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 660rpx;
			height: 68rpx;
			background-size: cover;
			background-image: url('https://renovationcdn.jiachuangnet.com/person/bg2.png');
		}
		.poto,.chat{
			&>.text{
				font-weight: 500;
				font-size: 27rpx;
				color: #1E272E;
				margin-left: 10rpx;
			}
		}
	}
	
	
	
	.showAddExperience{
		padding: 80rpx 10rpx 25rpx 10rpx;
	}
	.avatar_box{
		position: absolute;
		left: 67rpx;
		top:0;
		transform: translate(0,-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	.submit_btn{
		border-radius: 44rpx;
		overflow: hidden;
	}
	.post_image_box{
		width: 310rpx;
		height: 228rpx;
		background-color: #F5F5F5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.experience_wrapper{
		.experience_item:last-child{
			border: unset !important;
		}
	}
	
	.experience_item{
		font-size: 28rpx;
		color: #1E272E;
		font-weight: 500;
		border-bottom: 1px dashed #d2ebec;
		padding-bottom: 31rpx;
		
		.experience_item_projectName{
			font-weight: bold;
			
		}
		.experience_item_title{
			margin: 29rpx 0;
		}
		.experience_item_content{
			font-size: 26rpx;
			color: #8A8A8A;
			line-height: 40rpx;
		}
	}
	.boder_left{
		width: 2rpx;
		height: 26rpx;
		background: #C8C9CF;
		margin: 0 30rpx;
	}
	.placeholder{
		text-align:right;
		// font-weight: 500;
		font-size: 28rpx;
		color: #C8C9CF;
	}
	::v-deep.introduce_text{
		.input-placeholder{
			text-align:left !important; 
			font-weight: 500 !important;
			font-size: 28rpx;
			color: #C8C9CF;
		}
		.u-textarea__field{
			text-align:left !important;
			font-weight: 500 !important;
			font-size: 28rpx;
		}
	}
	::v-deep.info_box{
		.u-input{
			padding: 6rpx 10rpx !important;
			background-color: unset !important; 
		}
		.u-radio-group{
			.u-radio{
				margin-left: 29rpx;
			}
		}
		.uni-select__input-text{
			margin-right: 24rpx;
		}
		.input-placeholder{
			text-align:right;
			font-weight: 500 !important;
			font-size: 28rpx;
			color: #C8C9CF;
		}
		.u-input__content__field-wrapper__field{
			text-align:right !important;
			font-weight: 500 !important;
			font-size: 28rpx;
			color: #C8C9CF;
		}

		.uni-select--disabled{
			background-color: unset !important;
		}
		.u-textarea--disabled{
			background-color: unset !important;
		}
		
	}
	
	.alignItem{
		
	}
	.label{
		font-weight: 500;
		font-size: 28rpx;
		color: #1E272E;
		width: 150rpx !important;
	}
	.val{
		border-bottom: 1px solid #eee;
		padding: 15rpx 0;
	}
	.info_title{
		align-items: center;
		margin-right: 498rpx;
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #13989A;
		.boder-left{
			width: 8rpx;
			height: 26rpx;
			background: #13989A;
			border-radius: 4rpx;
		}
		
		
	}
	
	
	.flex{
		display: flex;
		justify-content: space-between;
	}
	.container /deep/ .uni-select {
		border: none !important;
		
	}
	.bg {
		width: 750rpx;
		height: 591rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.container{
		padding: 0;
		position: absolute;
		top: 200rpx;
		left: 25rpx;
		right: 25rpx;
		z-index: 2;
		// min-height: 100vh;
		padding-bottom: 45rpx;
	}
	.info_box,.certificates_unload,.experience_box{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 25rpx;
		margin-bottom: 21rpx;
	}
	.certificates_unload,.experience_box{
		min-height: 360rpx;
	}
	.container /deep/ .uni-select__input-placeholder {
		font-size: 28rpx !important;
		color: #c7ccd3;
		text-align: right;
	}
		
	.timer_box{
		display: flex;
		align-items: center;
	}
	
	.startTime,.endTime{
		line-height: 50rpx;
		border: 1px solid #c7ccd3;
		padding: 12rpx 10rpx;
		
	}
</style>